<template>
    <div class="emoji-picker">
      <div class="emoji-category" v-for="(emojis, category) in emojiCategories" :key="category">
        <div class="category-title">{{ category }}</div>
        <div class="emoji-grid">
          <span 
            v-for="emoji in emojis" 
            :key="emoji" 
            class="emoji" 
            @click="$emit('select-emoji', emoji)"
          >
            {{ emoji }}
          </span>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  const emojiCategories = {
    '表情': ['😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇'],
    '手势': ['👍', '👎', '👌', '✌️', '🤞', '🤟', '🤘', '🤙', '👋', '✋'],
    '动物': ['🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯'],
    '食物': ['🍎', '🍐', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓', '🍈', '🍒'],
    '交通': ['🚗', '🚕', '🚙', '🚌', '🚎', '🏎', '🚓', '🚑', '🚒', '🚐']
  }
  </script>
  
  <style scoped>
  .emoji-picker {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 300px;
    height: 300px;
    background-color: white;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    z-index: 1000;
  }
  
  .emoji-category {
    padding: 10px;
  }
  
  .category-title {
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
  }
  
  .emoji-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
  }
  
  .emoji {
    font-size: 20px;
    cursor: pointer;
    text-align: center;
    padding: 5px;
  }
  
  .emoji:hover {
    background-color: #f5f5f5;
    border-radius: 4px;
  }
  </style>